<template>
  <div class="mywish-bg">
    <div v-if="isShowShareMask" class="mywish-share-mask" @click="isShowShareMask = false">
      <div class="share-text">
        点击右上角把你的愿望清单分享给其他好友~
      </div>
    </div>
    <div class="mywish-star1"></div>
    <div class="mywish-star2"></div>
    <div class="mywish-title"></div>
    <div class="mywish-container">
      <blink-star
        :stars="[
          { left: '0.5rem', top: '0.8rem', type: '--yellow-square' },
          { right: '0.5rem', top: '0.8rem', type: '--yellow-square' },
          { left: '2.5rem', top: '0.4rem', type: '--yellow-square' },
          { left: '4.5rem', top: '0.5rem', type: '--cyan' },
          { left: '3.5rem', bottom: '0.8rem', type: '--yellow-bling' },
        ]"
      />
      <shooting-star />
      <div class="mywish-text">
        <div
          v-for="(item, index) in myWishlist"
          :id="item.user_id"
          :key="index"
          :class="`my-wish-text mywish-input${Number(index) + 1}`"
        >
          <span>{{ item.user_wish_name }}</span>
        </div>
      </div>
    </div>
    <div class="mywish-sharetext"></div>
    <div class="mywish-btn1" @click="shareMywish(id)"></div>
    <div class="mywish-btn2" @click="gotorank"></div>
  </div>
</template>

<script>
import { getShareIconUrl } from '@/lib/js/utils/share'
const shareIcon = getShareIconUrl(`${process.env.PUBLIC_PATH}/static/images/timetravel/wish-share.png`)



export default {
  data () {
    return {
      myWishlist: [],
      isShowShareMask: false
    }
  },

  created () {
    this.getMyWishList()
  },

  mounted(){
    //onShareWxTimeline
    const { HeyheyBridge } = window
    setTimeout(() =>{
      if (window.isHeyHeyTalk()) {
        HeyheyBridge.addBridgeListener('share:wxtimeline', ()=> {
          this.signUp()
        })

        HeyheyBridge.addBridgeListener('share:wxmessage', ()=> {
          this.signUp()
        })

        HeyheyBridge.addBridgeListener('share:qq', ()=> {
          this.signUp()
        })
      }
    }, 300)
  },

  methods: {
    signUp(){
      if(/mywish/.test(window.location.href)){
        const key = localStorage.getItem('__LOGIN_KEY__')
        this.$api.Wish.signUp({ key })
      }
    },

    shareMywish () {
      if (window.isHeyHeyTalk()) {
        const heyId = localStorage.getItem('currentUserHeyId')
        const heyNickName = localStorage.getItem('currentUserNickName')
        const shareTitle = `${heyNickName}的愿望清单`
        const desc = '快来帮Ta点赞，有机会实现全部愿望哦～'
        window.HeyheyBridge.openShareBar(
          {
            config: {
              'title': shareTitle,
              'desc': desc,
              'image': shareIcon,
              'link': `${window.location.origin}${window.location.pathname}#/otherwish?heyId=${heyId}`
            },
            wxtimeline: true,
            qq: true,
            wxmessage: true
          })
      }else{
        this.isShowShareMask = true
      }
    },

    gotorank () {
      this.$router.push('./rank')
    },

    async getMyWishList () {
      const res = await this.$api.Wish.getMyWishList()
      const { result: { userwishs_selected: myWishlist } } = res
      this.myWishlist = myWishlist
    }
  }
}
</script>

<style lang="scss" scoped>
.mywish-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url("./images/H_bg.jpg") no-repeat, url("./images/H_bg_mini.jpg") no-repeat;
  background-size: 100% auto,100% auto;
  background-position: 0 100%,  0 100%;
  overflow: hidden;
}
.mywish-star1 {
  position: absolute;
  top: 6.74%;
  left: 0;
  width: 1.67rem;
  height: 1.6rem;
  background-image: url("./images/H_star1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star1 6s infinite;
  @keyframes star1 {
    50% {
      top: 1.74%;
    }
    100% {
      top: 6.74%;
    }
  }
}
.mywish-star2 {
  position: absolute;
  top: 9.15%;
  right: 8.67%;
  width: 2.42rem;
  height: 1.06rem;
  background-image: url("./images/H_star2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star2 6s infinite;
  @keyframes star2 {
    50% {
      top: 12.15%;
    }
    100% {
      top: 9.15%;
    }
  }
}
.mywish-title {
  position: absolute;
  top: 1rem;
  left: 50%;
  margin-left: -1.745rem;
  width: 3.49rem;
  height: 0.45rem;
  background-image: url("./images/H_title.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.mywish-container {
  position: absolute;
  top: 2.2rem;
  left: 50%;
  margin-left: - 3.43rem;
  width: 6.86rem;
  height: 5.84rem;
  background-image: url("./images/H_container.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  .mywish-smallstar {
    position: absolute;
    top: 7.88%;
    right: 7.14%;
    width: 6.01rem;
    height: 4.61rem;
    background-image: url("./images/H_smallstar.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: smallstart 3s infinite;
    @keyframes smallstart {
      0%,
      100% {
        transform: scale(0.95);
        opacity: 0;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
    }
  }
  .shooting_star {
    position: absolute;
    top: -37%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("./images/H_meteor.png");
    background-size: 100% auto;
    animation: tail 2s ease-in-out infinite, shooting 2s ease-in-out infinite;

    @keyframes tail {
      0% {
        opacity: 0;
      }
      30% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes shooting {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(100px);
      }
    }
  }
  .mywish-text {
    margin-left: 1.2rem;
    margin-top: 1rem;
    font-size: 12px;
    color: #fff;
    text-align: center;
    span {
      position: relative;
      top: -0.03rem;
      margin-left: 0.2rem;
      text-align: left;
    }
    .my-wish-text {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
    }
    .mywish-input1 {
      width: 4.46rem;
      height: 0.92rem;
      margin-bottom: 0.3rem;
      background-image: url("./images/H_input.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
    .mywish-input2 {
      width: 4.46rem;
      height: 0.92rem;
      margin-bottom: 0.3rem;
      background-image: url("./images/H_input.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
    .mywish-input3 {
      width: 4.46rem;
      height: 0.92rem;
      margin-bottom: 0.3rem;
      background-image: url("./images/H_input.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
  }
}
.mywish-sharetext {
  position: fixed;
  top: 65%;
  left: 18.8%;
  width: 4.6rem;
  height: 0.92rem;
  background: url("./images/H_sharetext.png") no-repeat;
  background-size: 100% auto;
}
.mywish-btn1 {
  position: fixed;
  top: 74.3%;
  left: 23.3%;
  width: 3.99rem;
  height: 0.91rem;
  background-image: url("./images/H_btn1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.mywish-btn2 {
  position: fixed;
  top: 84.5%;
  left: 23.3%;
  width: 3.99rem;
  height: 0.91rem;
  background-image: url("./images/H_btn2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.mywish-share-mask{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('./images/mywish/share-mask.png') no-repeat;
  background-size:  100% auto;
  background-color: rgba(0,0,0,0.8);
  z-index: 8;
  padding-top: 8.2rem;
  .share-text{
    color: #fff;
    font-size: 0.36rem;
    width: 5.5rem;
    margin: 0 auto;
    text-align: center;
  }
}
</style>
